html, body{
	margin: 0;
	padding: 0;
	background: white;
}
#app{
	position: relative;
	box-sizing: border-box;
	margin: auto;
	padding: 0;
	text-align: center;
	font-family: "microsoft yahei", Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	border: 1px solid gray;
	overflow: hidden;
	-webkit-user-select: none;
	user-select: none;
	background: #EEEEEE;
}
.page{
	position: absolute;
	box-sizing: content-box;
	padding: 0;
	width: 100%;
	height: 100%;
}
.page-layer{
	position: absolute;
	width: 100%;
	height: 100%;
}
.page-back-wrap{
	position: absolute;
	z-index: 1;
	left: 15px;
	top: 10px;
}
.self-btn{
	cursor: pointer;
	opacity: 1;
	color: darkgreen;
}
.self-btn:active{
	opacity: 0.8;
	color: green;
}
.self-btn:hover{
	opacity: 0.5;
}
.player-camp-red{
	color: red;
}
.player-camp-blue{
	color: blue;
}
.player-camp-neutral{
	color: black;
}
.pointer-events-through{
	pointer-events: none;
}
.pointer-events-through>*{
	pointer-events: auto;
}
.my-dialog{
	z-index: 3;
	display: block;
	padding: 0;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0);
}
.my-dialog-content{
	position: relative;
	width: 95%;
	top: 50%;
	transform: translateY(-50%);
	box-sizing: border-box;
	padding: 0;
	margin: 0 auto;
	background: #F0F0F0;
}
.my-dialog_closebtn{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 10px;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	border-radius: 50%;
	color: white;
	cursor: pointer;
	transition: transform 300ms ease-in-out;
}
.my-dialog_closebtn:active{
	transform: translateY(-50%) rotate(180deg) scale(1.2, 1.2);
}
.my-card-header{
	position: relative;
	padding: 8px 10px;
	text-align: left;
	font-size: 20px;
}
.my-card-header>h4{
	margin: 0;
}
.spinner-modal{
	z-index: 3;
	display: block;
	padding: 0;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.4);
}
.spinner-modal-content{
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	opacity: 1;
}
.spinner{
	width: 50px;
	height: 60px;
	text-align: center;
	font-size: 14px;
}
.spinner>div{
	background-color: #df2d2d;
	height: 100%;
	width: 6px;
	display: inline-block;
	-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
	animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2{
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}
.spinner .rect3{
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}
.spinner .rect4{
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}
.spinner .rect5{
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay{
	0%, 40%, 100%{
		-webkit-transform: scaleY(0.4)
	}
	20%{
		-webkit-transform: scaleY(1.0)
	}
}
@keyframes stretchdelay{
	0%, 40%, 100%{
		transform: scaleY(0.4);
		-webkit-transform: scaleY(0.4);
	}
	20%{
		transform: scaleY(1.0);
		-webkit-transform: scaleY(1.0);
	}
}
.span-stress{
	display: table-cell;
	vertical-align: middle;
	color: red;
}
.my-a{
	color: blue;
	text-decoration: none;
}
.my-a:active{
	color: red;
}
.app-icon{
	border-radius: 20%;
}